<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <my-breadcrumb>粉丝管理</my-breadcrumb>
      </div>
      <!-- tabs -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="列表" name="list">
          <div class="fans_list">
            <div class="fans_item">
              <el-avatar :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              <p>item.name</p>
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>

          <!-- 分页 -->
            <!-- @current-change="hPageChange" -->
          <el-pagination
            style="margin-top: 1em;"
            background
            :page-size="10"
            layout="prev, pager, next"
            :total="100">
          </el-pagination>

        </el-tab-pane>
        <el-tab-pane label="画像" name="echart">画像</el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
export default {
  name: 'Fans',
  data () {
    return {
      // tabs的当前激活选项卡的name属性值
      activeName: 'list'
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
